<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/ajax.js"></script>
    <script src="../js/api.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        html {
            height: 5000px;
        }

        .back {
            position: fixed;
            bottom: 50px;
            right: 50px;
            padding: 10px 5px;
            border: 1px solid #333;
            display: none;
        }
    </style>
</head>

<body>
    <div class="back"><a href="#">返回顶部</a></div>
</body>
<script>
    // 函数节流   =>    如果一个函数短时间内连续触发,降低执行的频率


    /*
    // 未优化版
    var back = document.getElementsByClassName("back")[0];

    window.addEventListener("scroll", scrollHandler);

    function scrollHandler(e) {
        // console.log(this);
        // console.log(e);

        console.log("scrolling");

        var scrollTop = document.documentElement.scrollTop;

        if (scrollTop > 2000) {
            back.style.display = "block";
        } else {
            back.style.display = "none";
        }
    } */


    // Date.now(); // 获取当前时间对应的毫秒数   new Date().getTime();

    var back = document.getElementsByClassName("back")[0];

    // window.addEventListener("scroll", scrollHandler);
    // window.addEventListener("scroll", throttleHandler);


    var throttleHandler = throttle(scrollHandler);  // 调用throttle函数返回原函数的节流版
    window.addEventListener("scroll", throttleHandler);

    // 节流
    // var start = Date.now(); // 页面加载时存一个起始时间
    // function throttleHandler() {  //节流处理函数
    //     var end = Date.now();  // 每次函数执行时 存一个执行时间
    //     if (end - start >= 300) {
    //         scrollHandler();
    //         start = end; // 本次函数执行后,start重新记录当前结束时间 => 下次触发需要比当前时间多至少300ms
    //     }
    // }


    // var start = Date.now(); // 页面加载时存一个起始时间
    // function throttleHandler(e) {  //节流处理函数
    //     // this -> window
    //     // e -> 事件对象
    //     var end = Date.now();  // 每次函数执行时 存一个执行时间
    //     if (end - start >= 300) {
    //         // scrollHandler();
    //         scrollHandler.call(this, e);
    //         start = end; // 本次函数执行后,start重新记录当前结束时间 => 下次触发需要比当前时间多至少300ms
    //     }
    // }


    // var start = Date.now(); // 页面加载时存一个起始时间
    // function throttleHandler(...list) {  //节流处理函数
    //     // this -> window
    //     // e -> 事件对象
    //     var end = Date.now();  // 每次函数执行时 存一个执行时间
    //     if (end - start >= 300) {
    //         // scrollHandler();
    //         // scrollHandler.call(this, ...list);
    //         scrollHandler.apply(this, list);
    //         start = end; // 本次函数执行后,start重新记录当前结束时间 => 下次触发需要比当前时间多至少300ms
    //     }
    // }


    function throttle(callback, delay = 300) {
        var start = Date.now(); // 页面加载时存一个起始时间
        return function (...list) {  //节流处理函数
            // this -> window
            // e -> 事件对象
            var end = Date.now();  // 每次函数执行时 存一个执行时间
            if (end - start >= delay) {
                // callback();
                // callback.call(this, ...list);
                callback.apply(this, list);
                start = end; // 本次函数执行后,start重新记录当前结束时间 => 下次触发需要比当前时间多至少300ms
            }
        }
    }

    function scrollHandler(e) {
        console.log(this);
        console.log(e);

        console.log("scrolling");

        var scrollTop = document.documentElement.scrollTop;

        if (scrollTop > 2000) {
            back.style.display = "block";
        } else {
            back.style.display = "none";
        }
    }



    var logConThrottle = throttle(logCon, 1000);  // 创建logCon的节流版


    setInterval(function () {
        console.log("a");
        // logCon(1000)
        logConThrottle(100);  // 每隔10s执行一次
    }, 10)

    function logCon(con) {
        console.log(con);
    }

</script>

</html>